<script lang="ts" setup name="SmartMediaTemplateManager">
import CreateProjectDialog from './create-project-dialog.vue'
import PublicTemplatesPane from './public-templates-pane.vue'
import CommonPane from './pane-common.vue'

// 标签页相关
const activeTab = ref('public')

// 创建项目相关
const createProjectDialogRef = ref<InstanceType<typeof CreateProjectDialog>>()
const openCreateProjectDialog = () => {
  createProjectDialogRef.value?.open()
}

const createTimelineProject = (templateId: string, clipsParam: string) => {
  createProjectDialogRef.value?.open({
    templateId,
    clipsParam,
    templateType: 'Timeline'
  })
}
const createVETemplateProject = (templateId: string, clipsParam: string) => {
  createProjectDialogRef.value?.open({
    templateId,
    clipsParam,
    templateType: 'VETemplate'
  })
}
</script>

<template>
  <ContentWrap>
    <div class="flex items-center gap-x-4">
      <span class="text-xl">模板管理</span>
      <span class="flex-grow text-sm text-gray-400"
        >选择一个合适的模板，快速开始创作一个视频。</span
      >
      <el-button type="primary" @click="openCreateProjectDialog">新的创作</el-button>
    </div>
  </ContentWrap>

  <el-tabs v-model="activeTab" type="border-card">
    <el-tab-pane label="公共模板" name="public">
      <PublicTemplatesPane @create-project="createVETemplateProject" />
    </el-tab-pane>
    <el-tab-pane label="自定义普通模板" name="normal">
      <CommonPane type="Timeline" @create-project="createTimelineProject" />
    </el-tab-pane>
    <el-tab-pane label="自定义高级模板" name="advance">
      <CommonPane type="VETemplate" @create-project="createVETemplateProject" />
    </el-tab-pane>
  </el-tabs>

  <!-- 创建项目弹窗 -->
  <CreateProjectDialog ref="createProjectDialogRef" />
</template>
